<template>
  <div id="newauthHome">
    <div class="asd">
      <div class="navlist">
        <div
          v-for="(i, k) in navlist"
          :key="k"
          class="asdadzc"
          :class="{ aict: k == numindex }"
          @click="btn_nav(k)"
        >
          <i :class="i.icon"></i> {{ i.name }}
        </div>
      </div>
      <div class="main">
        <!-- 角色授权 -->
        <auth0 v-if="numindex == 0"> </auth0>
        <!-- 角色管理 -->
        <auth1 v-if="numindex == 1"> </auth1>
        <!-- 系统配置 -->
        <auth2 v-if="numindex == 3"> </auth2>
        <!-- 处室维护 -->
        <dept v-if="numindex == 2"></dept>
        <!-- 短信配置 -->
        <message v-if="numindex == 4"></message>
      </div>
    </div>
  </div>
</template>

<script>
import auth0 from './newauth/newindex1.vue'
import auth1 from './newauth/newindex2.vue'
import auth2 from './newauth/newindex3.vue'
import dept from './dept/index.vue'
import message from './shortMessage/index.vue'
export default {
  name: '',
  components: { auth0, auth1, auth2, dept, message },

  data() {
    return {
      numindex: 0,
      navlist: [
        {
          name: '角色授权',
          icon: 'el-icon-s-custom',
          num: 0,
        },
        {
          name: '角色管理',
          icon: 'el-icon-menu',
          num: 1,
        },
        {
          name: '处室维护',
          icon: 'el-icon-s-management',
          num: 2,
        },
        {
          name: '系统配置',
          icon: 'el-icon-s-tools',
          num: 3,
        },
        {
          name: '短信配置',
          icon: 'el-icon-s-tools',
          num: 4,
        },
      ],
    }
  },

  created() {
    // 定位到当前显示页'
  },
  methods: {
    btn_nav(e) {
      this.numindex = e
      console.log('numindex', this.numindex)
    },
  },
}
</script>
<style lang='scss' scoped>
  #newauthHome {
    .asd {
      display: flex;
      padding: 5px 0;
      width: 100%;
      height: calc(100% - 60px);
      margin-top: 60px;
    }
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    .aict {
      color: #369fff;
      border-left: #369fff 5px solid;
      background: #ecf5ff;
    }
    .main {
      padding: 10px 0px 10px 20px;
      width: calc(100% - 180px);
      overflow-y: auto;
      overflow-x: hidden;
    }
    .navlist {
      .asdadzc {
        text-align-last: left;
        padding-left: 40px;
      }
      i {
        font-size: 16px;
        margin-top: 4px;
      }
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #666666;
      width: 180px;
      cursor: pointer;
      height: 56px;
      line-height: 56px;
    }
  }
</style>